/* ==========================================================
   SHOOTEROFIO NEWS HOME
   COD-STYLE FEATURED LAYOUT
   ========================================================== */


/* ==========================================================
   BASE
   ========================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  color: #e8e8e8;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    #191919;

  background-size: 6px 6px;

  font-family:
    "Hitmarker Text VF",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==============================
Navbar
============================== */

.navbar {
width: 100%;
height: 78px;

display: flex;
align-items: center;
justify-content: space-between;

padding: 0 42px;

position: relative;
top: auto;
left: auto;

z-index: 99999;

background: rgba(16, 16, 16, 0.98);

backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

border-bottom: 1px solid rgba(255, 255, 255, 0.09);

box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);

transform: none;

transition:
background 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease;
}

.navbar.hide,
.navbar.navbar-hidden {
transform: none;
}

/* ==============================
Navbar Left / Logo
============================== */

.navbar .left {
height: 100%;

display: flex;
align-items: center;

min-width: 0;
}

.navbar .left::before {
content: "";

width: 34px;
height: 24px;

display: block;

margin-right: 28px;

background:
linear-gradient(#f2f2f2 0 0) top left / 100% 3px no-repeat,
linear-gradient(#f2f2f2 0 0) center left / 100% 3px no-repeat,
linear-gradient(#f2f2f2 0 0) bottom left / 100% 3px no-repeat;

opacity: 0.95;
}

.navbar h3,
.navbar .logo,
.navbar .left .logo {
margin: 0;

color: #fff;

font-family: "Hitmarker Condensed", "Roboto", sans-serif;

font-size: 34px;
line-height: 1;

font-weight: 900;

text-transform: uppercase;

letter-spacing: 1.2px;

white-space: nowrap;

transition: opacity 0.18s ease;
}

.navbar h3:hover,
.navbar .logo:hover,
.navbar .left .logo:hover {
opacity: 0.82;
}

.navbar .left::after {
content: "";

width: 1px;
height: 34px;

margin-left: 32px;

background: rgba(255, 255, 255, 0.42);
}

/* ==============================
Navbar Center
============================== */

.navbar .center {
height: 100%;

display: flex;
align-items: center;

gap: 0;

margin-left: 24px;
margin-right: auto;
}

.navbar .center > a,
.navbar .dropdown > a {
position: relative;

height: 78px;

display: flex;
align-items: center;

padding: 0 28px;

color: rgba(255, 255, 255, 0.88);

font-family: "Hitmarker Condensed", "Roboto", sans-serif;

font-size: 23px;
line-height: 1;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 1.5px;

transition:
color 0.16s ease,
background 0.16s ease,
opacity 0.16s ease;
}

.navbar .center > a:hover,
.navbar .dropdown:hover > a {
color: #fff;
background: rgba(0, 0, 0, 0.3);
}

.navbar .center a::after,
.navbar .dropdown > a::after {
display: none;
}

/* ==============================
Navbar Right
============================== */

.navbar .right {
height: 100%;

display: flex;
align-items: center;

gap: 18px;
}

.navbar .right a {
color: rgba(255, 255, 255, 0.88);

font-family: "Hitmarker Condensed", "Roboto", sans-serif;

font-size: 20px;
line-height: 1;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 1.5px;

white-space: nowrap;

transition:
color 0.18s ease,
background 0.18s ease,
opacity 0.18s ease;
}

.navbar .right a:hover {
color: #fff;
}

.navbar .right a:first-child::before {
content: "";

width: 1px;
height: 34px;

display: inline-block;

margin-right: 22px;

vertical-align: middle;

background: rgba(255, 255, 255, 0.42);
}

/* ==============================
Preorder Button
============================== */

.preorder-btn,
.navbar .right .preorder-btn,
.navbar .right a:last-child {
height: 48px;

display: flex;
align-items: center;
justify-content: center;

padding: 0 30px;

background: #ffd100;

color: #080808;

border: none;
border-radius: 0;

font-family: "Hitmarker Condensed", "Roboto", sans-serif;

font-size: 19px;
line-height: 1;

font-weight: 900;

letter-spacing: 1.8px;

text-transform: uppercase;

box-shadow: none;

transition:
background 0.18s ease,
color 0.18s ease,
transform 0.1s ease;
}

.preorder-btn:hover,
.navbar .right .preorder-btn:hover,
.navbar .right a:last-child:hover {
background: #ffe45a;
color: #000;
}

.preorder-btn:active,
.navbar .right .preorder-btn:active,
.navbar .right a:last-child:active {
transform: scale(0.98);
}

/* ==============================
Dropdown Menu
============================== */

.dropdown {
position: relative;

height: 100%;

display: inline-flex;
align-items: center;
}

.dropdown-content {
position: absolute;

top: 100%;
left: 0;

width: 390px;

padding: 10px 0;

background: linear-gradient(
180deg,
rgba(62, 62, 62, 0.96) 0%,
rgba(42, 42, 42, 0.96) 100%
);

backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.16);

box-shadow: 0 26px 65px rgba(0, 0, 0, 0.5);

opacity: 0;
visibility: hidden;

transform: translateY(8px);

pointer-events: none;

transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s ease;

z-index: 100000;
}

.dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;

transform: translateY(0);

pointer-events: auto;
}

.dropdown-content a {
min-height: 62px;

display: flex;
align-items: center;

padding: 0 26px;

margin: 0;

color: rgba(255, 255, 255, 0.9);

font-family: "Hitmarker Condensed", "Roboto", sans-serif;

font-size: 24px;
line-height: 1;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 1.6px;

white-space: nowrap;

transition:
background 0.15s ease,
color 0.15s ease,
padding-left 0.15s ease;
}

.dropdown-content a:hover {
background: rgba(255, 255, 255, 0.1);

color: #fff;

padding-left: 36px;
}

.dropdown-divider {
height: 1px;

background: rgba(255, 255, 255, 0.12);

margin: 8px 0;
}

.dropdown-label {
display: block;

padding: 12px 26px 8px;

color: rgba(255, 255, 255, 0.45);

font-family: "Hitmarker Text VF", "Roboto", sans-serif;

font-size: 11px;
line-height: 1;

font-weight: 900;

letter-spacing: 1.8px;

text-transform: uppercase;
}

.dropdown::after {
content: "";

position: absolute;

left: 0;
right: 0;
bottom: -10px;

height: 10px;
}

/* ==========================================================
   PAGE WRAPPER
   ========================================================== */

.news-home {
  width: min(100% - 64px, 1400px);

  margin: 0 auto;

  padding:
    48px
    0
    90px;
}


/* ==========================================================
   FEATURED AREA
   ========================================================== */

.featured-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(330px, 0.95fr);

  gap: 42px;

  align-items: start;
}


/* ==========================================================
   GENERIC STORY LINK
   ========================================================== */

.story-link {
  display: block;
}


/* ==========================================================
   HERO STORY
   ========================================================== */

.hero-story {
  min-width: 0;
}


/* image */

.hero-image {
  width: 100%;

  position: relative;

  overflow: hidden;

  background: #111;
}


/* COD-style accent strip */

.hero-image::before {
  content: "";

  position: absolute;

  z-index: 3;

  top: 0;
  bottom: 0;
  left: 0;

  width: 13px;
}


.hero-image img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 8.9;

  object-fit: cover;

  transition:
    transform 0.35s ease,
    filter 0.25s ease;
}


.hero-story:hover .hero-image img {
  transform: scale(1.015);

  filter: brightness(1.05);
}


/* ==========================================================
   META
   ========================================================== */

.story-meta {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-top: 12px;

  min-height: 24px;
}


.story-game {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    3px
    6px;

  background: #bdbdbd;

  color: #151515;

  font-family:
    "Hitmarker Condensed",
    Arial,
    sans-serif;

  font-size: 13px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.story-date {
  color: #898989;

  font-family:
    "Hitmarker Text VF",
    Arial,
    sans-serif;

  font-size: 13px;

  line-height: 1;

  font-weight: 500;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}


/* ==========================================================
   HERO HEADLINE
   ========================================================== */

.hero-story h1 {
  margin:
    10px
    0
    9px;

  color: #f5f5f5;

  font-family:
    "Hitmarker Condensed",
    Impact,
    sans-serif;

  font-size: clamp(
    32px,
    3vw,
    45px
  );

  line-height: 0.98;

  font-weight: 900;

  letter-spacing: 0.7px;

  text-transform: uppercase;

  transition:
    color 0.2s ease;
}


.hero-story:hover h1 {
  color: #ffffff;
}


/* ==========================================================
   TAGS
   ========================================================== */

.story-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 8px;
}


.story-tags span {
  min-height: 21px;

  display: inline-flex;

  align-items: center;

  padding:
    3px
    6px;

  border:
    1px solid
    rgba(255, 255, 255, 0.23);

  color: #8f8f8f;

  font-family:
    "Hitmarker Condensed",
    Arial,
    sans-serif;

  font-size: 12px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}


/* ==========================================================
   HERO DESCRIPTION
   ========================================================== */

.hero-description {
  max-width: 920px;

  margin:
    20px
    0
    0;

  color: #ffffff;

  font-family:
    "Hitmarker Text VF",
    Arial,
    sans-serif;

  font-size: 17px;

  line-height: 1.55;

  letter-spacing: 0.35px;
}


/* ==========================================================
   FEATURED SIDEBAR
   ========================================================== */

.featured-sidebar {
  display: flex;

  flex-direction: column;

  gap: 28px;
}


/* ==========================================================
   SIDE STORY
   ========================================================== */

.side-story {
  padding-bottom: 26px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.side-image {
  width: 100%;

  overflow: hidden;

  background: #111;
}


.side-image img {
  width: 100%;

  aspect-ratio: 16 / 8.8;

  display: block;

  object-fit: cover;

  transition:
    transform 0.32s ease,
    filter 0.2s ease;
}


.side-story:hover .side-image img {
  transform: scale(1.018);

  filter: brightness(1.05);
}


.side-story h2 {
  margin:
    10px
    0
    9px;

  color: #f4f4f4;

  font-family:
    "Hitmarker Condensed",
    Impact,
    sans-serif;

  font-size: clamp(
    24px,
    2vw,
    31px
  );

  line-height: 1.02;

  font-weight: 900;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}


/* ==========================================================
   MORE NEWS
   ========================================================== */

.more-news-section {
  margin-top: 94px;
}


.section-title {
  margin:
    0
    0
    22px;

  color: #f1f1f1;

  font-family:
    "Hitmarker Condensed",
    Impact,
    sans-serif;

  font-size: 37px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: 0.6px;

  text-transform: uppercase;
}



/* ==========================================================
   MORE NEWS GRID — 3 POSTS PER ROW
   ========================================================== */

.more-news-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  column-gap: 46px;
  row-gap: 36px;
}


/* ==========================================================
   MORE NEWS CARD
   ========================================================== */

.more-news-card {
  min-width: 0;

  padding-bottom: 28px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.more-news-card a {
  display: grid;

  grid-template-columns:
    minmax(190px, 0.95fr)
    minmax(0, 1fr);

  gap: 22px;

  align-items: start;
}


/* ==========================================================
   MORE NEWS IMAGE
   ========================================================== */

.more-news-image {
  width: 100%;

  overflow: hidden;

  background: #111;
}


.more-news-image img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  transition:
    transform 0.25s ease,
    filter 0.2s ease;
}


.more-news-card:hover .more-news-image img {
  transform: scale(1.025);

  filter: brightness(1.06);
}


/* ==========================================================
   MORE NEWS CONTENT
   ========================================================== */

.more-news-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-self: stretch;
}


.more-news-content h3 {
  margin: 0 0 18px;

  color: #f2f2f2;

  font-family:
    "Hitmarker Text VF",
    Arial,
    sans-serif;

  font-size: 18px;
  line-height: 1.32;

  font-weight: 400;

  letter-spacing: 0.3px;

  display: -webkit-box;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
}


.post-hidden {
  display: none;
}


.more-news-card:hover h3 {
  color: #fff;
}


/* ==========================================================
   DATE
   ========================================================== */

.more-news-date {
  display: block;

  margin-top: auto;
  margin-bottom: 11px;

  color: #828282;

  font-family:
    "Hitmarker Text VF",
    Arial,
    sans-serif;

  font-size: 12px;
  line-height: 1;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  white-space: nowrap;
}


/* ==========================================================
   GAME TAG
   ========================================================== */

.mini-game-tag {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 7px;

  background: #bcbcbc;

  color: #111;

  font-family:
    "Hitmarker Condensed",
    Arial,
    sans-serif;

  font-size: 12px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


/* ==========================================================
   VIEW MORE
   ========================================================== */


.view-more-container {
  margin-top: 52px;

  text-align: center;
}


.view-more-btn {
  min-width: 160px;

  padding:
    14px
    26px;

  border: 0;

  background: #9db447;

  color: #090909;

  font-family:
    "Hitmarker Condensed",
    Arial,
    sans-serif;

  font-size: 19px;

  font-weight: 900;

  letter-spacing: 1.4px;

  cursor: pointer;

  text-transform: uppercase;

  transition:
    background 0.2s ease,
    transform 0.1s ease;
}


.view-more-btn:hover {
  background: #b2c75a;
}


.view-more-btn:active {
  transform: scale(0.98);
}


.news-hidden {
  display: none;
}


/* ==========================================================
   RESPONSIVE — LARGE
   ========================================================== */

@media (max-width: 1350px) {

  .news-home {
    width: min(
      100% - 48px,
      1280px
    );
  }


  .featured-layout {
    grid-template-columns:
      minmax(0, 1.85fr)
      minmax(310px, 0.95fr);

    gap: 32px;
  }


  .more-news-grid {
    column-gap: 32px;
  }

  .more-news-card a {
    grid-template-columns:
      minmax(155px, 0.9fr)
      minmax(0, 1fr);

    gap: 17px;
  }

  .more-news-content h3 {
    font-size: 16px;
  }

}


/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 1000px) {

  .news-home {
    width: min(
      100% - 36px,
      900px
    );

    padding-top: 30px;
  }


  .featured-layout {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .featured-sidebar {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 26px;
  }


  .more-news-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .more-news-card a {
    grid-template-columns:
      minmax(170px, 0.95fr)
      minmax(0, 1fr);
  }


  .hero-story h1 {
    font-size: 38px;
  }

}


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 680px) {

  .news-home {
    width: calc(100% - 28px);

    padding:
      22px
      0
      60px;
  }


  .featured-layout {
    gap: 38px;
  }


  .featured-sidebar {
    display: flex;

    flex-direction: column;
  }


  .hero-image::before {
    width: 7px;
  }


  .hero-image img {
    aspect-ratio: 16 / 10;
  }


  .hero-story h1 {
    font-size: 31px;

    line-height: 1;
  }


  .side-story h2 {
    font-size: 27px;
  }


  .hero-description {
    font-size: 15px;

    line-height: 1.5;
  }


  .story-date {
    font-size: 11px;
  }


  .more-news-section {
    margin-top: 65px;
  }


  .section-title {
    font-size: 32px;
  }


  .more-news-grid {
    grid-template-columns: 1fr;

    row-gap: 30px;
  }


  .more-news-card a {
    grid-template-columns:
      145px
      minmax(0, 1fr);

    gap: 16px;
  }


  .more-news-content h3 {
    margin-bottom: 12px;

    font-size: 15px;
  }


  .more-news-date {
    font-size: 11px;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 430px) {

  .more-news-card a {
    grid-template-columns: 1fr;

    gap: 13px;
  }


  .more-news-image img {
    width: 100%;

    height: auto;

    aspect-ratio: 16 / 9;
  }


  .more-news-content h3 {
    font-size: 17px;
  }


  .story-meta {
    align-items: flex-start;
  }

}


/* ==========================================================
   JS BLOG RENDERER SUPPORT
   ========================================================== */

/*
 * The hero is injected inside this grid item.
 * min-width prevents long titles from forcing the grid wider.
 */
#hero-post {
  min-width: 0;
}


/*
 * Supports one or multiple compact tags in More News.
 */
.mini-game-tags {
  width: fit-content;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;
}


/*
 * Only shown if blog-posts.js has no posts.
 */
.blog-empty-state {
  margin: 0;

  color: #a8a8a8;

  font-family:
    "Hitmarker Text VF",
    Arial,
    sans-serif;

  font-size: 17px;
  line-height: 1.5;
}


/*
 * Used by blog-renderer.js for cards beyond the first 9.
 */
.news-hidden {
  display: none;
}